<template>
  <div class="app-container" style="font-size: 14px" ref="mmstemplateBox">
    <el-tabs v-model="activeName">
      <el-tab-pane label="员工通知" name="first">
        <el-card class="box-card" style="font-size: 14px">
          使用须知：<br/>
          1、开启短信、企业微信、钉钉通知时，请确认开发人员已配置相关参数。未配置参数则开启后也无法正常接收短信<br/>
          2、使用企业微信、钉钉通知时，请确保已对门店员工完成企微、钉钉账号关联。(商户中心-用户管理-用户管理-修改-关联企微/钉钉账号)
        </el-card>
        <el-form size="medium" label-width="150px">
          <el-row class="enableRow">
            <el-col :sm="24" :md="12" :lg="4">
              <el-form-item label="企业微信通知" prop="qyEnable">
                <el-switch class="my-enable-switch" v-model="qyEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" @change="enableChange(1)"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="4">
              <el-form-item label="钉钉通知" prop="ddEnable">
                <el-switch class="my-enable-switch" v-model="ddEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" @change="enableChange(2)"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="4">
              <el-form-item label="短信通知" prop="dxEnable">
                <el-switch class="my-enable-switch" v-model="dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" @change="enableChange(3)"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-collapse v-model="activeNames">
          <el-collapse-item name="1" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="新订单通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，相关人员即可收到通知)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content1" :id="'content1'" :init-text="template1.content1" :optiona-params="optionaParams1" @nowHtmlT="setContent(1,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <el-table v-loading="loading" :data="template1.storeConfigList" border>
                  <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                  <el-table-column label="通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName" min-width="120"/>
                  <el-table-column label="操作" align="center" prop="memberStatus" min-width="80">
                    <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="selectUser(scope.row,1)">设置人员</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
<!--                    <template slot="header" slot-scope="scope">-->
<!--                      <el-switch class="my-table-Switch" v-model="qyEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>-->
<!--                    </template>-->
                    <template slot-scope="scope">
                      <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                    <template slot-scope="scope">
                      <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                    <template slot-scope="scope">
                      <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                    <template slot-scope="scope">
                      <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                    <template slot-scope="scope">
                      <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="2" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="业务员通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，将订单分配给业务员，业务员即可收到短信通知)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>分配为收发车员：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content21" :id="'content21'"  :init-text="template2.content1" :optiona-params="optionaParams2" @nowHtmlT="setContent(21,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;display: flex;align-items: center;justify-content: space-between;">
                <div><span style="color: red;">*</span>临近取车时间通知：</div>
                <div>取车前<el-input  v-model="nearPickTimeStaff" style="width: 80px" @keyup.native="nearPickTimeStaff= oninputMinute(nearPickTimeStaff)"></el-input>分钟通知</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content22" :id="'content22'"  :init-text="template2.content2"  :optiona-params="optionaParams2" @nowHtmlT="setContent(22,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;;display: flex;align-items: center;justify-content: space-between">
                <div><span style="color: red;">*</span>临近还车时间通知：</div>
                <div>还车前<el-input  v-model="nearReturnTimeStaff" style="width: 80px" @keyup.native="nearReturnTimeStaff= oninputMinute(nearReturnTimeStaff)"></el-input>分钟通知</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content23" :id="'content23'"  :init-text="template2.content3" :optiona-params="optionaParams2" @nowHtmlT="setContent(23,$event)"></template-content>
              </el-col>


              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template2.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="其他通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName" min-width="120"/>
                    <el-table-column label="操作" align="center" prop="memberStatus" min-width="80">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="selectUser(scope.row,2)">设置人员</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="3" class="app-car-container" >
            <el-row slot="title">
              <MmvTitle title="告警通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，若车辆触发GPS告警，相关人员即可收到短信通知)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content  ref="content3" :id="'content3'" :init-text="template3.content1" :optiona-params="optionaParams3" @nowHtmlT="setContent(3,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template3.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName"/>
                    <el-table-column label="通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName"/>
                    <el-table-column label="告警类型" :show-overflow-tooltip="true"  align="center" prop="alarmName"/>
                    <el-table-column label="操作" align="center" prop="memberStatus">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="selectUser(scope.row,3)">设置人员</el-button>
                      </template>
                    </el-table-column>


                    <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="4" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="商业险到期通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，距离车辆商业险到期仅有 {{template4.warningTime}} 天时，通知相关人员)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content4" :id="'content4'" :init-text="template4.content1" :optiona-params="optionaParams4" @nowHtmlT="setContent(4,$event)"></template-content>
              </el-col>

              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template4.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName" min-width="120"/>
                    <el-table-column label="操作" align="center" prop="memberStatus" min-width="80">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="selectUser(scope.row,4)">设置人员</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="5" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="交强险到期通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，距离车辆交强险到期仅有{{template5.warningTime}}天时，通知相关人员)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content5" :id="'content5'" :init-text="template5.content1" :optiona-params="optionaParams5" @nowHtmlT="setContent(5,$event)"></template-content>
              </el-col>

              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template5.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName" min-width="120"/>
                    <el-table-column label="操作" align="center" prop="memberStatus" min-width="80">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="selectUser(scope.row,5)">设置人员</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="6" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="年检到期通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，距离车辆年检到期仅有{{template6.warningTime}}天时，通知相关人员)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content6" :id="'content6'" :init-text="template6.content1" :optiona-params="optionaParams6" @nowHtmlT="setContent(6,$event)"></template-content>
              </el-col>

              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template6.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName" min-width="120"/>
                    <el-table-column label="操作" align="center" prop="memberStatus" min-width="80">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="selectUser(scope.row,6)">设置人员</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="7" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="保养到期通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，到达车辆保养公里数时，通知相关人员)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content7" :id="'content7'" :init-text="template7.content1" :optiona-params="optionaParams7" @nowHtmlT="setContent(7,$event)"></template-content>
              </el-col>

              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template7.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="通知人员" :show-overflow-tooltip="true"  align="center" prop="pushStaffName" min-width="120"/>
                    <el-table-column label="操作" align="center" prop="memberStatus" min-width="80">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="selectUser(scope.row,7)">设置人员</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column label="企微单人通知" v-if="qyEnable==1"  align="center" prop="qyDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉单人通知" v-if="ddEnable==1" align="center" prop="ddDrEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddDrEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="短信通知" v-if="dxEnable==1" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微群通知" v-if="qyEnable==1" align="center" prop="qyQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.qyQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="企微Webhook" v-if="qyEnable==1" align="center" prop="qyWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.qyWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.qyQunEnable==0"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉群通知" v-if="ddEnable==1" align="center" prop="ddQunEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.ddQunEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="钉钉Webhook" v-if="ddEnable==1" align="center" prop="ddWebhook" min-width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ddWebhook" placeholder="请输入机器人Webhook地址" clearable size="small" :disabled="scope.row.ddQunEnable==0"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="客户通知" name="second">
        <el-collapse v-model="activeNames">
          <!--用户取车通知-->
          <el-collapse-item name="8" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="用户取车通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，临近客户取车时间，推送短信至客户手机)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;display: flex;align-items: center;justify-content: space-between">
                <div><span style="color: red;">*</span>到店取车通知内容：</div>

                <div>取车前<el-input  v-model="nearPickTimeCustomer" style="width: 80px" @keyup.native="nearPickTimeCustomer= oninputMinute(nearPickTimeCustomer)"></el-input>分钟通知</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content81"  :id="'content81'" :init-text="template8.content1" :optiona-params="optionaParams8" @nowHtmlT="setContent(81,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>上门送车通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content82"  :id="'content82'" :init-text="template8.content2" :optiona-params="optionaParams8" @nowHtmlT="setContent(82,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template8.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="短信通知" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>
          <!--用户还车通知-->
          <el-collapse-item name="9" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="用户还车通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：开通后，临近客户还车时间，推送短信至客户手机)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1" style="margin-top: 20px;display: flex;align-items: center;justify-content: space-between">
                <div><span style="color: red;">*</span>到店还车通知内容：</div>
                <div>还车前<el-input  v-model="nearReturnTimeCustomer" style="width: 80px" @keyup.native="nearReturnTimeCustomer= oninputMinute(nearReturnTimeCustomer)"></el-input>分钟通知</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content91" :id="'content91'" :init-text="template9.content1" :optiona-params="optionaParams9" @nowHtmlT="setContent(91,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>上门取车通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content92"  :id="'content92'" :init-text="template9.content2" :optiona-params="optionaParams9" @nowHtmlT="setContent(92,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template9.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="短信通知" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>
          <!--用户还车通知-->
          <el-collapse-item name="10" class="app-car-container">
            <el-row slot="title">
              <MmvTitle title="用户免押扣款通知">
                <div style=" margin-left: 20px; margin-top: 3px; color: #a59d9dd6;">(注：客户芝麻免押租车后，若发起对客户押金的线上扣款，将以短信通知客户)</div>
              </MmvTitle>
            </el-row>
            <el-row>
              <el-col :span="23" :offset="1">
                <div><span style="color: red;">*</span>扣款成功通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content101"  :id="'content101'" :init-text="template10.content1"  @nowHtmlT="setContent(101,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>扣款失败通知内容：</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <template-content ref="content102" :id="'content102'"  :init-text="template10.content2" @nowHtmlT="setContent(102,$event)"></template-content>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div><span style="color: red;">*</span>门店配置:</div>
              </el-col>
              <el-col :span="23" :offset="1" style="margin-top: 20px;">
                <div>
                  <el-table v-loading="loading" :data="template10.storeConfigList" border>
                    <el-table-column label="门店名称" align="center" prop="storeName" min-width="150"/>
                    <el-table-column label="短信通知" align="center" prop="dxEnable" min-width="120">
                      <template slot-scope="scope">
                        <el-switch class="my-table-Switch" v-model="scope.row.dxEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <div style="position: fixed;right: 0px;bottom: 0px;background: #FFF;width: 100%;text-align: right;padding: 10px 50px;border-top: 1px #dedede solid;">
      <el-button @click="refresh(true)">刷新</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>

    <el-drawer title="人员配置" :visible.sync="drawerFlagUser" :direction="directionUser" size="50%" :before-close="handleUserClose" :modal="false">
      <el-row v-if="msgType==3">
        <el-col :span="22" :offset="1">
          <div><span style="color: red;">*</span>告警类型：</div>
        </el-col>
        <el-col :span="22" :offset="1" style="margin-top: 20px;">
          <el-select v-model="alarmType" multiple placeholder="告警类型" clearable :style="{ width: '100%' }">
            <el-option v-for="dict in dict.type.gps_alarm_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22" :offset="1">
          <div>已选人员：</div>
        </el-col>
        <el-col :span="22" :offset="1" style="margin-top: 20px;">
          <el-input type="textarea" v-model="selectedPersonnelStr" readonly></el-input>
        </el-col>
      </el-row>
      <el-form :model="queryParamsUser" ref="queryUserForm" :inline="true" label-width="68px" style="margin-top: 20px;">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="queryParamsUser.userName" placeholder="请输入名称" clearable size="small"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="queryParamsUser.phonenumber" placeholder="请输入手机号" clearable size="small"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryUser">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryUser">重置</el-button>
        </el-form-item>
      </el-form>
      <div v-if="drawerFlagUser">
        <el-table v-loading="loadingDrawer" tooltip-effect="dark" row-key="userId" ref="multipleTable" :data="UserDrawerList" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" :reserve-selection="true" width="55"/>
          <el-table-column label="用户名称" align="center" prop="userName"/>
          <el-table-column label="所属部门" align="center" prop="dept.deptName"/>
          <el-table-column label="角色"  align="center" prop="roleName"/>
          <el-table-column label="企微名称" align="center" prop="qwUserName"/>
          <el-table-column label="钉钉名称" align="center" prop="ddUserName"/>
          <el-table-column label="手机号" align="center" prop="phonenumber"/>
        </el-table>
      </div>
      <pagination v-show="totalUser>0" :total="totalUser" :page.sync="queryParamsUser.pageNum" :limit.sync="queryParamsUser.pageSize" @pagination="getUserList"/>
      <el-row style="margin-top: 20px;">
        <el-col :span="8" :offset="8">
          <el-button @click="handleUserClose">取 消</el-button>
          <el-button type="primary" @click="confirm">确 认</el-button>
        </el-col>
      </el-row>
    </el-drawer>
 </div>
</template>
<script>
import {addMmstemplate, storeUserList} from '@/api/message/mmstemplate'
import {getNotify, updateNotify} from '@/api/message/notify'
import {checkPermi} from '@/utils/permission'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import CustomContent from '@/components/custom/content.vue'
import TemplateContent from './myTemplateContent.vue'

export default {
  components: {
    MmvTitle,
    CustomContent,
    TemplateContent
  },
  name: 'Mmstemplate',
  dicts: [ 'gps_alarm_type'],
  data() {
    return {

      fullscreenLoading: false,

      activeName: 'first',
      activeNames: [],
      // activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      qyEnable: 0,
      ddEnable: 0,
      dxEnable: 0,
      nearPickTimeStaff: 0,
      nearReturnTimeStaff: 0,
      nearPickTimeCustomer: 0,
      nearReturnTimeCustomer: 0,

      optionaParams1:[
        '客户名称',
        '客户手机号码',
        '品牌/车系/车型',
        '预计取车时间',
        '预计还车时间',
        '取还方式',
        '取车门店',
        '还车门店',
        '取车地址',
        '还车地址',
      ],
      optionaParams2:[
        '订单编号',
        '客户名称',
        '客户手机号码',
        '品牌/车系/车型',
        '预计取车时间',
        '预计还车时间',
        '车牌号',
        '员工姓名',
        '分配身份',
      ],
      optionaParams3:[
        '车牌号',
        '设备编码',
        '告警类型',
        '定位地点',
        '订单编号',
        '客户名称',
        '客户手机号码',
      ],
      optionaParams4:[
        '车牌号',
        '到期时间'
      ],
      optionaParams5:[
        '车牌号',
        '到期时间'
      ],
      optionaParams6:[
        '车牌号',
        '到期时间'
      ],
      optionaParams7:[
        '车牌号',
        '当前里程',
        '保养里程'
      ],
      optionaParams8:[
        '取车门店',
        '预计取车时间'
      ],
      optionaParams9:[
        '还车门店',
        '预计还车时间'
      ],

      template1: {
        content1: null,
        storeConfigList: [],
      },
      template2: {
        content1: null,
        content2: null,
        content3: null,
        storeConfigList: [],
      },
      template3: {
        content1: null,
        storeConfigList: [],
      },
      template4: {
        warningTime: 15,
        content1: null,
        storeConfigList: [],
      },
      template5: {
        warningTime: 15,
        content1: null,
        storeConfigList: [],
      },
      template6: {
        warningTime: 15,
        content1: null,
        storeConfigList: [],
      },
      template7: {
        content1: null,
        storeConfigList: [],
      },
      template8: {
        content1: null,
        content2: null,
        storeConfigList: [],
      },
      template9: {
        content1: null,
        content2: null,
        storeConfigList: [],
      },

      template10: {
        content1: null,
        content2: null,
        storeConfigList: [],
      },

      loading: false,

      //人员配置选择框
      drawerFlagUser: false,
      directionUser: 'rtl',
      selectedPersonnel: [],
      queryParamsUser: {
        pageNum: 1,
        pageSize: 10,
        deptIdTemplate: null,
        userName: "",
        phonenumber: ""
      },
      loadingDrawer: false,
      UserDrawerList: [],
      totalUser: 0,


      alarmType: [],
      alarmName: [],

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      allHaveQw: true,
      allHaveDd: true,
      // 非多个禁用
      multiple: true,
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        name: null,
        status: null,
      },

      mmstemplate: {},
      msgType: 1,
      rowSelectFlag: false
    }
  },
  computed : {
    formData() {
      return {
        qyEnable: this.qyEnable,
        ddEnable: this.ddEnable,
        dxEnable: this.dxEnable,
        nearPickTimeStaff: this.nearPickTimeStaff,
        nearReturnTimeStaff: this.nearReturnTimeStaff,
        nearPickTimeCustomer: this.nearPickTimeCustomer,
        nearReturnTimeCustomer: this.nearReturnTimeCustomer,
        template1: this.template1,
        template2: this.template2,
        template3: this.template3,
        template4: this.template4,
        template5: this.template5,
        template6: this.template6,
        template7: this.template7,
        template8: this.template8,
        template9: this.template9,
        template10: this.template10,
      }
      },
    selectedPersonnelStr(){
      return this.selectedPersonnel?this.selectedPersonnel.join(","):""
    }
  },
  created() {
    this.refresh(true);
  },
  methods: {
    checkPermi,
    //刷新
    refresh(flag) {
      let loading;
      if(flag){
        loading  = this.$loading({
          target: this.$refs.mmstemplateBox,
          lock: true,
          text: '请稍等...',
          spinner: 'el-icon-loading',
        });
      }

      getNotify().then(res=>{
        this.qyEnable=res.data.qyEnable,
        this.ddEnable=res.data.ddEnable,
        this.dxEnable=res.data.dxEnable,
        this.nearPickTimeStaff=res.data.nearPickTimeStaff,
        this.nearReturnTimeStaff=res.data.nearReturnTimeStaff,
        this.nearPickTimeCustomer=res.data.nearPickTimeCustomer,
        this.nearReturnTimeCustomer=res.data.nearReturnTimeCustomer,
        this.template1=res.data.template1,
        this.template2=res.data.template2,
        this.template3=res.data.template3,
        this.template4=res.data.template4,
        this.template5=res.data.template5,
        this.template6=res.data.template6,
        this.template7=res.data.template7,
        this.template8=res.data.template8,
        this.template9=res.data.template9,
        this.template10=res.data.template10

        this.$refs.content1.initContent(this.template1.content1)
        this.$refs.content21.initContent(this.template2.content1)
        this.$refs.content22.initContent(this.template2.content2)
        this.$refs.content23.initContent(this.template2.content3)
        this.$refs.content3.initContent(this.template3.content1)
        this.$refs.content4.initContent(this.template4.content1)
        this.$refs.content5.initContent(this.template5.content1)
        this.$refs.content6.initContent(this.template6.content1)
        this.$refs.content7.initContent(this.template7.content1)
        this.$refs.content81.initContent(this.template8.content1)
        this.$refs.content82.initContent(this.template8.content2)
        this.$refs.content91.initContent(this.template9.content1)
        this.$refs.content92.initContent(this.template9.content2)
        this.$refs.content101.initContent(this.template10.content1)
        this.$refs.content102.initContent(this.template10.content2)
      }).finally(err=>{
        loading.close()
      })
    },
    oninputMinute(val) {
      if(!val){
        return val
      }
      val = val.replace(/[^\d.]/g, ""); //保留数字
      val = val.replace(/^00/, "0."); //开头不能有两个0
      val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
      val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
      /^0\d+/.test(val) ? val = val.slice(1) : ''; //两位以上数字开头不能为0
      const str = '^(\\d+)\\.(\\d{0}).*$'
      const reg = new RegExp(str)
      // 不需要小数点
      val= val.replace(reg, '$1')
      if(Number(val)>120){
        return 120
      }
      if(Number(val)<1){
        return 1
      }
      return val
    },
    enableChange(type) {
      if(type===1){
        for (let i=1;i<=7;i++){
           this.formData["template"+i].storeConfigList.forEach(item=>{
             item.qyDrEnable=0;
             item.qyQunEnable=0;
             item.qyWebhook=null;
           })
        }
      };
      if(type===2){
        for (let i=1;i<=7;i++){
          this.formData["template"+i].storeConfigList.forEach(item=>{
              item.ddDrEnable=0;
              item.ddQunEnable=0;
              item.ddWebhook=null;
          })
        }
      };
      if(type===3){
        for (let i=1;i<=7;i++){
          this.formData["template"+i].storeConfigList.forEach(item=>{
            item.dxEnable=0;
          })
        }
      };
    },
    setContent(type,e) {
      switch (type) {
          case 1:
            this.template1.content1=e
            break;
          case 21:
            this.template2.content1=e
            break;
          case 22:
            this.template2.content2=e
            break;
          case 23:
            this.template2.content3=e
            break;
          case 3:
            this.template3.content1=e
            break;
          case 4:
            this.template4.content1=e
            break;
          case 5:
            this.template5.content1=e
            break;
          case 6:
            this.template6.content1=e
            break;
          case 7:
            this.template7.content1=e
            break;
          case 81:
            this.template8.content1=e
            break;
          case 82:
            this.template8.content2=e
            break;
          case 91:
            this.template9.content1=e
            break;
          case 92:
            this.template9.content2=e
            break;
          case 101:
            this.template10.content1=e
            break;
          case 102:
            this.template10.content2=e
            break;
      }
    },
    handleUserClose() {
      this.drawerFlagUser = false;
    },
    selectUser(row,msgType) {
      this.drawerFlagUser = true;
      this.queryParamsUser.pageNum = 1;
      this.queryParamsUser.storeId = row.storeId;
      this.mmstemplate = row;
      this.msgType = msgType;
      this.getUserList(row);
    },
    handleQueryUser() {
      this.queryParamsUser.pageNum = 1;
      this.getUserList();
    },
    /** 查询用户列表 */
    getUserList() {
      if (this.mmstemplate) {
        this.ids = this.mmstemplate.pushStaff ? this.mmstemplate.pushStaff.split(",") : [];
        this.selectedPersonnel = this.mmstemplate.pushStaffName ? this.mmstemplate.pushStaffName.split(",") : [];
      }else{
        this.ids = [];
        this.selectedPersonnel =  [];
      }
      this.loadingDrawer = true;
      storeUserList(this.queryParamsUser).then(response => {
        this.UserDrawerList = response.rows;
        setTimeout(() => {
          this.rowSelectFlag = true
          this.UserDrawerList.forEach(row => {
            this.ids.forEach(id => {
              if (parseInt(id) == parseInt(row.userId)) {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              }
            })
          });
          this.rowSelectFlag = false
        }, 0)
        this.totalUser = response.total;
        this.loadingDrawer = false;
      });
    },
    /** 重置按钮操作 */
    resetQueryUser() {
      this.queryParamsUser.pageNum=1
      this.queryParamsUser.pageSize= 10
      this.queryParamsUser.userName= ""
      this.queryParamsUser.phonenumber= ""
      this.handleQueryUser();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (this.rowSelectFlag) return
      this.ids = selection.map((item) => item.userId)
      this.selectedPersonnel = selection.map((item) => item.userName)
      let arr1 = selection.filter((item) => {return !item.qwUserId});
      this.allHaveQw = arr1.length === 0
      let arr2 = selection.filter((item) => {return !item.ddUserId})
      this.allHaveDd = arr2.length === 0
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    confirm() {
      this.alarmName = [];
      if(this.msgType == 3){
        if(!this.alarmType||this.alarmType.length===0){
          this.$modal.msgError('请选择告警类型')
          return false;
        }
        this.dict.type.gps_alarm_type.forEach(item => {
          if (this.alarmType.includes(item.value)) {
            this.alarmName.push(item.label)
          }
        })
      }



      let qyDrEnable = 0;
      let ddDrEnable = 0;

      let storeId = this.queryParamsUser.storeId;
      this["template"+this.msgType].storeConfigList.forEach(item => {
        if (item.storeId === storeId) {
          this.$set(item, 'pushStaff', this.ids.join(","))
          this.$set(item, 'pushStaffName', this.selectedPersonnel.join(","))
          this.$set(item, 'alarmType', this.alarmType.join(","))
          this.$set(item, 'alarmName', this.alarmName.join(","))
          qyDrEnable = item.qyDrEnable
          ddDrEnable = item.ddDrEnable
          this.$set(item, 'allHaveQw', this.allHaveQw)
          this.$set(item, 'allHaveDd', this.allHaveDd)
        }
      })
      if((this.ddEnable==1&&ddDrEnable==1&&!this.allHaveDd)||(this.qyEnable==1&&qyDrEnable==1&&!this.allHaveQw)){
        this.$alert('部分通知人员未匹配钉钉或企业微信账号，为避免通知发送失败，请及时前往用户管理模块进行匹配', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
      }
      this.handleUserClose();
    },
    /** 提交按钮 */
    submitForm() {
      if(this.verifyWebhook()){
        const loading = this.$loading({
          target: this.$refs.mmstemplateBox,
          lock: true,
          text: '请稍等...',
          spinner: 'el-icon-loading',
        });
        updateNotify(this.formData).then((response) => {
          this.$modal.msgSuccess('保存成功')
          this.refresh(false)
        }).finally(err=>{
          loading.close();
        })
      }
    },
    verifyWebhook(){
      for (let i=1;i<=10;i++){
        let template = this.formData["template"+i];
        let storeConfigList= template.storeConfigList
        for(let item of storeConfigList){

          if(i<=7){
            if((this.ddEnable==1&&(item.ddDrEnable==1||item.ddQunEnable==1))||(this.qyEnable==1&&(item.qyDrEnable==1||item.qyQunEnable==1))||(this.dxEnable==1&&item.dxEnable==1)){
              if(i===2){
                if(!template.content1||!template.content2||!template.content3){
                  this.$modal.msgError('请输入['+this.formatMsgType(i)+']通知内容')
                  return false;
                }
                if(!this.nearPickTimeStaff||!this.nearReturnTimeStaff){
                  this.$modal.msgError('请设置['+this.formatMsgType(i)+']提前通知时间')
                  return false;
                }
              }else{
                if(!template.content1){
                  this.$modal.msgError('请设置['+this.formatMsgType(i)+']通知内容')
                  return false;
                }
              }
            }
            if((this.ddEnable==1&&item.ddDrEnable==1)||(this.qyEnable==1&&item.qyDrEnable==1)||(this.dxEnable==1&&item.dxEnable==1)){
              if(i!==2&&(!item.pushStaff||item.pushStaff.length===0)){
                this.$modal.msgError('请设置['+this.formatMsgType(i)+']['+item.storeName+']人员信息')
                return false;
              }
            }
            if((this.ddEnable==1&&item.ddQunEnable==1&&!item.ddWebhook)||(this.qyEnable==1&&item.qyQunEnable==1&&!item.qyWebhook)){
              this.$modal.msgError('请输入['+this.formatMsgType(i)+']['+item.storeName+']群机器人Webhook地址')
              return false;
            }
          }else{
            if(item.dxEnable==1){
              if(!template.content1||!template.content2){
                this.$modal.msgError('请输入['+this.formatMsgType(i)+']通知内容')
                return false;
              }
              if(i===8){
                if(!this.nearPickTimeCustomer){
                  this.$modal.msgError('请设置['+this.formatMsgType(i)+']提前通知时间')
                  return false;
                }
              }
              if(i===9){
                if(!this.nearReturnTimeCustomer){
                  this.$modal.msgError('请设置['+this.formatMsgType(i)+']提前通知时间')
                  return false;
                }
              }
            }
          }
        }
      }
      return true
    },
    formatMsgType(msgType){
      switch (msgType) {
        case 1:
          return "新订单通知";
        case 2:
          return "业务员通知";
        case 3:
          return "告警通知";
        case 4:
          return "商业险到期通知";
        case 5:
          return "交强险到期通知";
        case 6:
          return "年检到期通知";
        case 7:
          return "保养到期通知";
        case 8:
          return "用户取车通知";
        case 9:
          return "用户还车通知";
        case 10:
          return "用户免押通知";
      }
    },

  },
}
</script>
<style scoped="scoped">
/deep/ .this_textarea textarea {
  resize: none;
}

/deep/ .enableRow .el-form-item {
  margin: 10px !important;
}

/deep/ .enableRow .el-form-item__label {
  font-size: 18px !important;
}

/deep/ .app-car-container {
  padding: 0;
  margin-bottom: 10px;
}

/deep/ .el-collapse-item__header {
  padding-left: 10px;
}

/deep/ .el-collapse-item__content {
  padding-right: 20px;
}
/deep/ .el-tabs__content {
  padding-bottom: 55px;
}


.param_btn {
  min-width: 100px;
  margin: 5px;
}


::v-deep .mmv-title {
  align-items: center !important;
  padding: 0px !important;
}

.mmv-title {
  align-items: center !important;
  padding: 0px !important;
}

</style>
<style lang="scss">
  .my-enable-switch {
    margin-left: -20px;

    .el-switch__label--left {
      position: relative;
      left: 75px;
      color: #fff;
      z-index: -1111;

      span {
        width: 40px;
      }
    }

    .el-switch__label--right {
      position: relative;
      right: 65px;
      color: #fff;
      z-index: -1111;

      span {
        display: inline-block;
        width: 40px;
      }
    }

    .el-switch__core {
      width: 65px !important;
    }

    .el-switch__label--right.is-active {
      z-index: 10;
      color: #fff !important;
    }

    .el-switch__label--left.is-active {
      z-index: 10;
      color: #fff !important;
    }

    .el-switch__core {
      height: 24px !important;
      border-radius: 12px !important;
    }

    .el-switch__core:after {
      top: 3px;
      left: 5px;
    }

    .el-switch.is-checked .el-switch__core::after {
      margin-left: -20px;
    }
  }

.my-table-Switch {
  margin-left: -20px;

  .el-switch__label--left {
    position: relative;
    left: 70px;
    color: #fff;
    z-index: -1111;

    span {
      width: 40px;
    }
  }

  .el-switch__label--right {
    position: relative;
    right: 65px;
    color: #fff;
    z-index: -1111;

    span {
      display: inline-block;
      width: 40px;
    }
  }

  .el-switch__core {
    width: 65px !important;
  }

  .el-switch__label--right.is-active {
    z-index: 10;
    color: #fff !important;
  }

  .el-switch__label--left.is-active {
    z-index: 10;
    color: #fff !important;
  }

  .el-switch__core {
    height: 24px !important;
    border-radius: 12px !important;
  }

  .el-switch__core:after {
    top: 3px;
    left: 5px;
  }

  .el-switch.is-checked .el-switch__core::after {
    margin-left: -20px;
  }
}

</style>
